Skip to main content

Detailed Implementation Steps

If you are planning to contribute a major chart, follow the below steps to align the component with fluent charting design, principles, style and standards.

Step 1: Background research. Is there any existing work that has already happened (either on the dev side or on the design side) or in the backlog. Any planned feature can be found in our roadmap here along with high level timelines and current status. Also look for any discussions about the feature in our discord channel. If the ask is net new, setup sometime with the charting team. This will help determine the next steps to proceed with designing the control as per fluent charting framework.

Step 2: Visual design. The design figma should cover specification about the following aspects before the control can be implemented.

  1. Anatomy: Describe the components of the chart and how each of them will look.
  2. Possible sizes: The control can be supported in different sizes like S, M, L XL.
  3. Variations: The control can have multiple variations for different use cases.
  4. Handling large dataset or data labels.
  5. Theming: How will the chart look in light mode and dark mode. What about high contrast mode.
  6. Colors: What is the supported color palette by this chart. It should either use the default color palette of react charting or a subset of it.
  7. Interactive behavior: Define how the user can interact with points and other visuals in the chart. For eg: hover card when a user hovers over a chart area, selecting particular legend.
  8. Accessibility: The charting library is currently MAS C compliant. The chart should meet accessibility standards to ensure this grade.
  9. RTL support: The library supports RTL scripts. Do we need any special design to support them.

Refer to this figma to see an example.

Step 3: Dev Design. Once the visual design is finalized, prepare a dev design document. You can look at design docs of other charts for reference. [Example] Try to include the following sections in the design document.

  1. External interfaces
  2. Props
  3. React lifecycle state management.
  4. Data structure to store and process the data.
  5. Handling large data sets.
  6. Rerendering and recomputations on user interactions.
  7. Reusable components.
  8. Unit testable and component testable pieces.
  9. Mapping geometrical logic to visual graph.
  10. Limitations.
  11. Alternative design considerations.
  12. Accessibility considerations

These design collaterals will be added to this contributor guide for future references.

Step 4. POC. - This step will overlap with step 2. This will help understand and align with overall design of fluent charting library. The charting team will be more than happy to participate in design discussions to iterate over step 2 and 3. Once done get a formal review from the charting team and address any feedbacks.

Step 5: Implementation.

Step 6: Pilot with a customer as an unstable component. The rollout starts by piloting with a partner assuming the component to have some bugs. This phase includes fixing these bugs and correcting any external interfaces.

Step 7: Stable release. Once the component has been released as stable, it can no longer have any breaking changes before the next major release of the library.

If the proposed changes are bugfixes, minor enhancements or extension then steps 1-4, 5 and 6 can be brief or skipped. But make sure to capture any relevant information in PR description or supporting documents.